<template>
  <el-dialog
    :title="title"
    :width="width"
    top="50px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="100px">
      <el-form-item label="字典类型" prop="dictType">
        <span>{{form.dictType}}</span>
      </el-form-item>
      <el-form-item label="数据标签" prop="dictLabel">
        <el-input v-model="form.dictLabel" placeholder="请输入数据标签"/>
      </el-form-item>
      <el-form-item label="数据键值" prop="dictValue">
        <el-input v-model="form.dictValue" placeholder="请输入数据键值"/>
      </el-form-item>
      <el-form-item label="显示排序" prop="dictSort">
        <el-input-number v-model="form.dictSort" controls-position="right" :min="0"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio
            v-for="(key,value) in normalStatus"
            :label="value*1"
          >{{key}}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="warning" plain :loading="buttonLoading" @click="isVisible = false">
        {{ $t('common.cancel') }}
      </el-button>
      <el-button type="primary" plain :loading="buttonLoading" @click="submitForm()">
        {{ $t('common.confirm') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    addDictData,
    updateDictData,
  } from '@/api/system/dict'
  export default {
    name: "dicDataEdit",
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      normalStatus: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        buttonLoading: false,
        width: this.initWidth(),
        screenWidth: 0,
        form: this.initInfo(),
        rules: {
          dictLabel: [
            {required: true, message: "数据标签不能为空", trigger: "blur"}
          ],
          dictValue: [
            {required: true, message: "数据键值不能为空", trigger: "blur"}
          ],
          dictSort: [
            {required: true, message: "显示排序不能为空", trigger: "blur"}
          ]
        }
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
          this.reset()
        }
      }
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.width = this.initWidth()
        })()
      }
    },
    methods: {
      initInfo() {
        return {
          dictCode: "",
          dictLabel: "",
          dictValue: "",
          dictType: "",
          dictSort: 0,
          status: 0,
          remark: ""
        }
      },
      setInfo(val) {
        this.form = {...val}
      },
      initWidth() {
        this.screenWidth = document.body.clientWidth
        if (this.screenWidth < 991) {
          return '90%'
        } else if (this.screenWidth < 1400) {
          return '45%'
        } else {
          return '800px'
        }
      },
      close() {
        this.$emit('close')
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.buttonLoading = true
            if(!this.form.dictCode){
              // create
              addDictData(this.form).then(res=>{
                if(res.code==200){
                  this.isVisible = false
                  this.$message({
                    message: this.$t('tips.createSuccess'),
                    type: 'success'
                  })
                  this.$emit('success')
                }else {
                  this.$message({
                    message: res.message,
                    type: 'error'
                  })
                }
              }).finally(()=>{
                this.buttonLoading = false
              })
            }else {
              // update
              updateDictData(this.form.dictCode,this.form).then(res=>{
                if(res.code==200){
                  this.isVisible = false
                  this.$message({
                    message: this.$t('tips.updateSuccess'),
                    type: 'success'
                  })
                  this.$emit('success')
                }else {
                  this.$message({
                    message: res.message,
                    type: 'error'
                  })
                }
              }).finally(()=>{
                this.buttonLoading = false
              })
            }
          } else {
            return false
          }
        })
      },
      reset() {
        this.$refs.form.clearValidate()
        this.$refs.form.resetFields()
        this.form = this.initInfo()
      },
    }
  }
</script>

<style scoped>

</style>
